<template>
  <page-lr class="page-industry-info-manage">
    <el-form size="small" :model="searchForm" label-width="110px" slot="content-right">
      
      <el-form-item label="所属县区：">
        <el-select v-model="searchForm.county" placeholder="请选择" :disabled="userInfo.is_region_user">
          <el-option v-for="(item,index) in initData.countys" :key="index" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="污染源类别：" class="form-class">
        <el-checkbox-group v-model="searchForm.class" @change="changeClass">
          <el-checkbox v-for="(item,index) in initData.classes" :key="index" :label="item.label" >
            {{item.label}}
        </el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="工业行业：" class="height-auto" v-if="searchForm.class.indexOf('工业源') != -1">
        <el-checkbox :indeterminate="indeterminateIndustries" v-model="checkedAllIndustries" @change="changeCheckAllIndustries">全选</el-checkbox>
        <el-select
          v-model="searchForm.indtype_level2"
          multiple
          collapse-tags
          class="select-industries"
          style="margin-left: 0px;height:auto;width:100%;"
          placeholder="请选择"
          @change="changeIndustries">
          <el-option
            v-for="item in initData.industries"
            :key="item.id"
            :label="item.text"
            :value="item.text">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="执行情况：">
        <el-select v-model="searchForm.execution" placeholder="请选择">
          <el-option v-for="(item,index) in initData.executions" :key="index" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item >
        <el-button icon="el-icon-refresh" size="small" @click="resetSearch">重置</el-button>
        <el-button type="primary" icon="el-icon-search" size="small" @click="getList()">查询</el-button>
      </el-form-item>
    </el-form>
    <template slot="content-left">
      <div class="flex-block align-left m-b-15">
        <div style>
          <el-link icon="el-icon-back" type="primary" :underline="false" class="fl" style="font-size:16px;" @click="toEventList">返回</el-link>
          <span class="m-l-15 inline-block">污染应对事件：</span><b>{{row.episode_name}}</b>
        </div>
        <div>
          <JsonExcel
            class="downloadExcel import-btn"
            :data="allExportData"
            :fields="excelField"
            worksheet="My Worksheet"
            :name="row.episode_name+'.xlsx'"
            style="display:inline-block;margin-right:10px;"
          >
            <el-button icon="el-icon-download" type="primary" size="small">导出</el-button>
          </JsonExcel>
          <el-button icon="el-icon-refresh" size="small" @click="getList(page.current)">重置</el-button>
        </div>
      </div>
      <el-table
          v-loading="table_data.loading"
          ref="multipleTable"
          :data="table_data.list"
          stripe
          border
          :height="tableHeight"
          size="medium"
          style="width: 100%">
          <el-table-column label="序号" type="index" width="55" fixed />
          <el-table-column label="企业名称" prop="name" fixed />
          <el-table-column label="所属区县" prop="county" />
          <el-table-column label="所属镇街" prop="town" />
          <el-table-column label="污染源类别" prop="class" />
          <el-table-column label="行业类型" prop="indtype_level2" />
          <el-table-column label="基本管控要求" prop="measures_base" show-overflow-tooltip />
          <el-table-column label="强化管控建议" prop="measures_advanced" show-overflow-tooltip/>
          <el-table-column label="执行情况" prop="execution">
            <template slot-scope="scope">
              <el-tag :type="getType(scope.row.execution)">{{scope.row.execution}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="监管记录" prop="records" />
          <el-table-column label="填报人" prop="editor" />
          <el-table-column label="操作" fixed="right" width="160px">
            <template slot-scope="scope">
              <el-link :underline="false" type="primary" class="m-r-10" icon="el-icon-view" @click="handleView(scope.row)">详情</el-link>
              <el-link :underline="false" type="primary" class="m-r-10" icon="el-icon-edit" @click="$refs.editInfo.init(scope.row)">编辑</el-link>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          :current-page="page.current"
          :page-size="page.size"
          :page-sizes="page_sizes"
          :total="page.total"
          background
          style="padding-top: 30px; text-align: center;"
          layout="total, sizes, prev, pager, next, jumper"
          @current-change="getList"
          @size-change="pageSizeChange"
        />
    </template>
    <edit-industry ref="editIndustry" @save="getList(page.current)" />
    <edit-dust ref="editDust" @save="getList(page.current)" />
    <edit-oil ref="editOil" @save="getList(page.current)" />
    <edit-restaurant ref="editRestaurant" @save="getList(page.current)" />
    <edit-info ref="editInfo" @confirm="getList(page.current)" />
  </page-lr>
</template>
<script>
import JsonExcel from "vue-json-excel";
import editIndustry from '@/views/page/industry-info-management/components/editIndustry';
import editDust from '@/views/page/industry-info-management/components/editDust';
import editOil from '@/views/page/industry-info-management/components/editOil';
import editRestaurant from '@/views/page/industry-info-management/components/editRestaurant';
import editInfo from './editInfo';
export default {
  components: {
    editIndustry,
    editDust,
    editOil,
    editRestaurant,
    editInfo,
    JsonExcel
  },
  data() {
    return{
      searchForm:{
        county: null,
        indtype_level2: null,
        execution: null,
        class: null,
      },
      row: {},
      defaultSearchForm:{},
      table_data:{
        loading: true,
        list: [],
      },
      page:{
        current: 1,
        size: 10,
        total: 0,
      },
      page_sizes:[10,20,30,60,100],
      domHeight: null,
      tableHeight: null,
      isCheckedAll: true,
      indeterminate: false,
      checkedAllIndustries: true,
      indeterminateIndustries: false,
      initData:{
        allIndustries: [],
        countys: [
          {name: '全市', id: null},
          {name: '香洲区', id: '香洲区'},
          {name: '金湾区', id: '金湾区'},
          {name: '斗门区', id: '斗门区'},
          {name: '高新区', id: '高新区'},
          {name: '鹤洲新区', id: '鹤洲新区'},
          {name: '横琴粤澳深度合作区', id: '横琴粤澳深度合作区'}
        ],
        industries: [],
        executions:[
          {id: null, name: '全部情况'},
          {id:'未落实', name: '未落实'},
          {id:'部分落实', name: '部分落实'},
          {id:'已落实', name: '已落实'},
        ],
        classes: [
          { label: '工业源', value: 1, name: 'editIndustry',color: '#FE5656', icon: require('@/assets/images/icons/工业源.png') },
          { label: '扬尘源', value: 2, name: 'editDust',color: '#EAEA26', icon: require('@/assets/images/icons/扬尘源.png')},
          { label: '油站油库', value: 3, name: 'editOil',color: '#01E17E', icon: require('@/assets/images/icons/油站油库.png') },
          { label: '大型餐饮', value: 4, name: 'editRestaurant',color: '#3DD1F9', icon: require('@/assets/images/icons/大型餐饮.png') },
        ],
      },
      userInfo:{},
      allExportData: [],
      excelField: {
        序号: 'index',
        企业名称: 'name',
        所属区县: 'county',
        所属镇街: 'town',
        污染源类别: 'class',
        行业类型: 'indtype_level2',
        基本管控要求: 'measures_base',
        强化管控建议: 'measures_advanced',
        执行情况: 'execution',
        监管记录: 'records',
        填报人: 'editor',
      }
    }
  },
  created(){
    this.table_data.loading = false;
    this.isRegionUser();
    this.getInitData();
  },
  watch:{
    $route(to,from){
      this.$refs.multipleTable.doLayout();
    }
  },
  methods:{
    init(row){
      this.row = row;
      this.getList();
    },
    isRegionUser(){
      this.userInfo = this.$store.getters.currentUserInfo;
      if(this.userInfo.is_region_user){
        this.searchForm.county = this.userInfo.region_code;      
      }
    },
    async getInitData(){
      this.defaultSearchForm = JSON.parse(JSON.stringify(this.searchForm));
      this.domHeight = document.body.clientHeight - 64 - 40 - 48*2 - 10;
      this.tableHeight = this.domHeight -47-60;
      this.searchForm.class = this.initData.classes.map(item => item.label);
      let allIndustries = await this.$request('get', '/stations/ind_code', {});
      this.initData.allIndustries = allIndustries; 
      let industries = allIndustries.filter(item => {
        return Number(item.value) > 4 && Number(item.value) < 47;
      });     
      this.getIndustries(allIndustries);

    },
    getIndustries(allIndustries){    
      let newIndustries = allIndustries.map(item => {
        item.label = item.value + ' | ' + item.text;
        return item;
      });
      let industriesTree = this.$util.getTreeList(newIndustries, {
        parentId: 'parent_id'
      });
      industriesTree = this.changeTree(industriesTree);
      let industries = [];
      industriesTree.forEach(item => {
        industries = industries.concat(item.children);
      });
      this.initData.industries = industries.filter(item => {
        return Number(item.value) > 4 && Number(item.value) < 47;
      });
      this.searchForm.indtype_level2 = this.initData.industries.map(item => item.text);
      console.log(this.initData);
      
    },
    changeClass(val){
      if(val.indexOf('工业源') == -1){
        this.searchForm.indtype_level2 = [];
        this.indeterminateIndustries = false;
      }else{
        this.searchForm.indtype_level2 = this.initData.industries.map(item => item.text);
        this.indeterminateIndustries = true;
      }
    },
    changeCheckAllIndustries(val){
      let arr = [];
      if(val){
        arr = this.initData.industries.map(item => item.text);
        this.indeterminateIndustries = false;
      }
      this.searchForm.indtype_level2 = arr;
    },
    changeIndustries(val){
      let len = this.initData.industries.length;
      let n = val.length;
      if(n == 0){
        this.checkedAllIndustries = false;
        this.indeterminateIndustries = false;
      }else if(n > 0 && n < len){
        this.indeterminateIndustries = true;
      }else if(n == len){
        this.indeterminateIndustries = false
      }
    },
    changeTree(data){
      let arr = data.map(item => {
        if(!item.hasOwnProperty('children')){
          item.label = item.value4 + ' | ' + item.text;
        }else{
          item.children = this.changeTree(item.children);
        };
        return item;
      });
      return arr;
    },
    getList(page,size){
      let params = {
        page_num : page || 1,
        page_count : size || this.page.size,
        id: this.row.id,
      };
      params.page_num -= 1;
      this.table_data.loading = true; 
      this.$request('post', '/stations/pollute_incidence_list_detail'+this.$util.serialize(params), this.$util.filterParams(this.searchForm), (data,msg) => {
        this.table_data.loading = false;
        this.table_data.list = data.datas;
        this.page.total = data.total;
      },msg => {
        this.table_data.loading = false;
      });
      let params2 = JSON.parse(JSON.stringify(params));
      params2.page_count = 10000;
      this.$request('post', '/stations/pollute_incidence_list_detail'+this.$util.serialize(params2), this.$util.filterParams(this.searchForm), (data,msg) => {
        this.allExportData = data.datas.map((item,index) => {
          item.index = index + 1;
          return item;
        });
      },msg => {
        
      });

    },
    pageSizeChange(val){
      this.page.size=val;
      this.getList(1, val);
    },	
    resetSearch(){
      this.$util.resetForm(this.searchForm, this.defaultSearchForm);
      this.getList();
    },
    toEventList(){
      this.$emit('change',{}, 'eventList');
    },
    getType(val){
      let type;
      switch(val){
        case '未落实':
          type = 'danger';
          break;
        case '部分落实':
          type = 'primary';
          break;
        case '已落实':
          type = 'success';
          break;
      }
      return type;
    },
    getComponentsName(data){
      let name;
      switch(data){
        case '工业源':
          name = 'editIndustry';
          break;
        case '扬尘源':
          name = 'editDust';
          break;
        case '油站油库':
          name = 'editOil';
          break;
        case '大型餐饮':
          name = 'editRestaurant';
          break;
      }
      return name;
    },
    handleOperate(name,row,type){
      this.$refs.editIndustry.isShow = false;
      this.$refs.editDust.isShow = false;
      this.$refs.editOil.isShow = false;
      this.$refs.editRestaurant.isShow = false;
      this.$refs[name].init(row, type);
    },
    handleView(row){
      this.$request('post', '/stations/ind_sel?page_count=1&page_num=0', {id: row.ent_id}, (data,msg)=> {
        let res = data.datas[0]
        this.handleOperate(this.getComponentsName(res.class), res, 'view')
      })      
    },
  }

}
</script>